<template>
	<div>
		<ul class="nav">
			<li style="margin:0 80px;"><img src="../../build/logo.png"/></li>
			<li v-for='(nav,index) in navList'  @click="changeIndex(index)" :class="activeIndex==index ? 'activeIndex':''">
				<router-link :to='nav.path'>{{nav.title}}</router-link>
			</li>
		</ul>
		<el-button @click='$router.push("workerManage")' >返回首页</el-button>
	</div>
</template>
<script>
	import {mapState,mapActions} from 'vuex'
	export default {
		name: 'HeaderNav',
		computed: {
			...mapState({
				navList: 'navList',
				activeIndex: 'activeIndex',
			})
		},
		methods:{
			...mapActions([
				'changeIndex',
			]),
			checkIndex(){
				let activePath = this.$route.path
				let index = 0
				switch(activePath) {
					case '/basicMessage':
						index = 0;
						break;
					case '/workExperience':
						index = 1;
						break;
					case '/trainFiles':
						index = 2;
						break;
					case '/studyRecord':
						index = 3;
						break;
					case '/certificateMessage':
						index = 4;
					default:
						index = 5;
						break;
				}
				this.changeIndex(index)
			},
		},
		mounted(){
			this.checkIndex()
		}
	}
</script>
<style type="text/css" scoped="scoped">
	ul{
		height: 80px;
		
	}
	img{
		width:214px;
	}
</style>